<template>
  <view class="seemore">
    <view class="seemore_top">
      <u-navbar
        :border-bottom="false"
        :title-bold="true"
        back-icon-size="44"
        :title="$t('合作详情')"
        title-color="rgba(0,0,0,0.88)"
        title-size="28"
      ></u-navbar>
      <!-- <u-dropdown active-color="#FF5F00">
        <u-dropdown-item v-model="value1" :options="options1" title="价格"
                         @change="change(value1,'price')"></u-dropdown-item>
        <u-dropdown-item v-model="value2" :options="options2" title="速度"
                         @change="change(value2,'speed')"></u-dropdown-item>
        <u-dropdown-item v-model="value3" :options="options3" title="综合排序"
                         @change="change(value3,'ranking_score')"></u-dropdown-item>
      </u-dropdown> -->
    </view>
    <view class="seemore_body">
      <view  class="seemore_body_bottom">
        <show-detail v-if="loading" :info="dataes[index]" :type="detailType"></show-detail>
        <view class="seemore_view">
          <view @click="communicates(index)">{{$t('即时沟通')}}</view>
          <view class="cooperation" @click="cooperate(index)">{{$t('选择合作')}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {exitCard, createC2CConversation} from "@/common/public";
import showDetail from "@/components/showDetail.vue";
import myTitle from "@/components/myTitle.vue";

export default {
  data() {
    return {
      index:0,
      loading: false,
      //价格
      value1: "",
      //速度
      value2: "",
      //综合排序
      value3: "",
      //价格下拉菜单
      options1: [
        {
          label: '正序',
          value: "ASC",
        },
        {
          label: '倒序',
          value: "DESC",
        }
      ],
      //速度下拉菜单
      options2: [{
        label: '正序',
        value: "ASC",
      },
        {
          label: '倒序',
          value: "DESC",
        },
      ],
      //综合排序菜单
      options3: [{
        label: '正序',
        value: "ASC",
      },
        {
          label: '倒序',
          value: "DESC",
        },
      ],
      //卡片数据
      list: [],
      current: 1,
      order_id: 0,
      template: {
        current: false, //是否被选中
        cardArr: [
          {
            key: "join_user.avatar", title: this.$t('头像'), isIcon: true, images: []
          },
          {
            key: "product", title: this.$t('名称'), message: ""
          },
          {
            key: "join_user.label", title: this.$t('标签'),
            isIcon: true, images: []
          },
          {
            key: "con_text", title: "合作内容",
            message: ""
          },
          {
            key: "price_ranking", title: "当前价格排名",
            message: ""
          },
          {
            key: "speed_ranking", title: "当前速度排名",
            message: ""
          },
          {
            key: "num_ranking", title: "当前综合排名",
            message: ""
          }
        ]
      },  //模版数据
      templates: {
        current: false, //是否被选中
        cardArr: [
          {
            key: "join_user.avatar", title: this.$t('头像'), isIcon: true, images: []
          },
          {
            key: "product", title: this.$t('名称'), message: ""
          },
          {
            key: "join_user.label", title: this.$t('标签'),
            isIcon: true, images: []
          },
          {
            key: "con_text", title: "合作内容",
            message: ""
          },
          {
            key: "pay_margin", title: "是否缴纳保证金",
            message: ""
          },
          {
            key: "price_ranking", title: "当前价格排名",
            message: ""
          },
          {
            key: "speed_ranking", title: "当前速度排名",
            message: ""
          },
          {
            key: "num_ranking", title: "当前综合排名",
            message: ""
          }
        ]
      },  //模版数据
      page: 1,
      dataes: [],
      type: "",
      isStort: "",
      detailType: "order_join"
    };
  },
  methods: {
    communicates(i) {
      let to_mobile = this.dataes[i].join_user.mobile
      createC2CConversation(to_mobile, this)
    },
    cooperate(i) {
      let join_order_id = this.dataes[i].id
      this.$u.route({
        url: "/pages/order/process/cooperate",
        params: {
          order_id: this.order_id,
          join_order_id: join_order_id
        }
      })
    },
    orderCooperateLists(data) {
      this.$u.api.order.orderCooperateList(data).then(res => {
        this.dataes = res
        this.list = []
        console.log('list', this.list)
        res.forEach(item => {
          this.template = JSON.parse(JSON.stringify(this.templates))
          this.template.cardArr = exitCard(this.template.cardArr, item)
          let temp = {current: false, cardArr: this.template.cardArr}
          this.list.push(temp)
          console.log(this.list)
        })
        uni.stopPullDownRefresh()
        this.loading = true
      })
    },
    clear() {
      this.list = []
      this.page = 1
      this.template = {}
      this.template = JSON.parse(JSON.stringify(this.templates))
      this.value1 = ""
      this.value2 = ""
      this.value3 = ""
      this.type = ""
      this.isStort = ""
    },
    change(e, value) {
      this.clear()
      this.type = value
      this.isStort = e
      switch (value) {
        case "ranking_score":
          //综合
          this.value3 = e
          break
        case "price":
          //价钱
          this.value1 = e
          break;
        case "speed":
          //速度
          this.value2 = e
          break;
      }
      this.orderCooperateLists({order_id: this.order_id, page: this.page, sort: value, order: e})
    }

  },
  onPullDownRefresh() {
    //下拉刷新
    this.clear()
    this.orderCooperateLists({order_id: this.order_id, page: this.page})
  },
  // onReachBottom() {
  //     //上拉加载
  //     if (this.dataes.length === 0) return
  //     this.page++
  //     this.orderCooperateLists({order_id: this.order_id, page: this.page, sort: this.type, order: this.isStort})
  // },
  components: {
    myTitle, showDetail,
  },
  onLoad(options) {
    this.order_id = options.order_id
    this.index = options.index
    this.orderCooperateLists({order_id: this.order_id, page: this.page})
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("合作详情")
    })
  },
}
</script>

<style lang="scss" scoped>
.seemore {
  background-color: #F7F7F7;

  .seemore_top {
    background-color: $my-bgColorFFFFFF;
  }

}

.seemore_body_bottom {
  display: flex;
  flex-direction: column;
  padding-top: 40rpx;
  background-color: #FFFFFF;
  margin-bottom: 10rpx;

  .seemore_view {
    // max-width:240rpx ;
    border-top: 2rpx solid #E9E9E9;
    margin-top: -32rpx;
    background-color: $my-bgColorFFFFFF;
    margin-bottom: 19.19rpx;
    height: 108.14rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    view {
      max-width: 240rpx;
      min-height: 45rpx;
      border-radius: 14rpx;
      border: 2rpx solid #979797;
      font-size: 29rpx;
      font-weight: 400;
      color: #000000;
      line-height: 30rpx;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      margin-right: 19.19rpx;
      padding: 10rpx;
    }
  }
}

.cooperation {
  background: linear-gradient(310deg, #F69528 0%, #DD2910 100%);
  border: 0rpx solid red !important;
  color: #FFFFFF !important;
}
</style>
